4857
6343
 
特に2つのことに注意が必要な場合があります。
const RecaptchaItem = React.createClass({..})をグローバルに宣言し、render()でローカル変数にしないでください
onloadCallbackとverifyCallbackの両方を提供する必要があります。onloadCallbackがない場合、reCAPTCHAはverifyCallbackの呼び出しをトリガーせず、フォームは値を取得できません。これはおそらくreact-recaptchaのバグです
正しいコードは次のとおりです。
const {フォーム、アイコン、入力、ボタン、チェックボックス} = antd;
const FormItem = Form.Item;
const RecaptchaItem = React.createClass({
verifyCallback(result){
console.log( 'verifyCallback'、result);
this.props.onChange(result); //確認後にフォームに通知します
}、
render(){
return( {}}
verifyCallback = {this.verifyCallback}
/>);
}
});
const NormalLoginForm = Form.create()(React.createClass({
handleSubmit(e){
e.preventDefault();
this.props.form.validateFields((err、values)=> {
if(!err){
console.log( 'フォームの受信値:'、values);
}
});
}、
render(){
const {getFieldDecorator} = this.props.form;
戻る(
{getFieldDecorator( 'userName'、{ ルール:[{必須:true、メッセージ: 'ユーザー名を入力してください!' }]、 })( } placeholder = "Username" /> )} {getFieldDecorator( 'password'、{ ルール:[{必須:true、メッセージ: 'パスワードを入力してください!' }]、 })( } type = "password" placeholder = "Password" /> )} {getFieldDecorator( 'captcha'、{ ルール:[{必須:true、メッセージ: '取得したキャプチャを入力してください!' }]、 })()} {getFieldDecorator( 'remember'、{ valuePropName: 'チェック済み'、 initialValue:true、 })( <チェックボックス>覚えておいてください )} パスワードを忘れた